<template>
  <div class="x-qr-code">
    <img v-show="false" class="qr-code" ref="qrCode" src="">
  </div>
</template>

<script>

  export default {
    props: {
      /**
       * 边缘留白几个格子
       */
      margin: {
        type: Number,
        default: 1
      },
      /**
       * 每个格子占的像素
       */
      scale: {
        type: Number,
        default: 8
      }
    },
    methods: {
      generate (url) {
        if (!url) {
          return
        }
        const image = this.$refs['qrCode']
        const QrCode = window.QRCode
        QrCode.toCanvas(url, {
          errorCorrectionLevel: 'L',
          margin: this.margin,
          scale: this.scale
        }, (e, canvas) => {
          if (e) {
            console.log(e)
          }
          image.src = canvas.toDataURL('image/png')
          this.$emit('openQrCode', image.src)
        })
      }
    }
  }
</script>

<style lang="less">
  .x-qr-code {
    .qr-code {
      max-width: 100%;
      max-height: 100%;
    }
  }
</style>
